<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props的基本使用</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>

</head>
<body>
<div id="app">

</div>
<ul id="per"></ul>
<ul id="per1"></ul>
<script type="text/babel">
    class Person extends React.Component {
        // 构造器可写可不写,如果写了构造器则一定要接收props
        constructor(props) {
            super(props);
            console.log('constructor',this.props)
        }
        // 对标签属性及类型、必要性进行限制
       static propTypes = {
            name:PropTypes.string.isRequired, // 限制姓名是字符串且必传
            age:PropTypes.number, // 限制年龄必须是数值
            sex: PropTypes.string, // 限制sex必须是字符串
            speak:PropTypes.func // 限制speak必须是函数
        }
        // 指定默认标签属性值
     //  前面都加static是为了将属性传给Person对象本身而不是实例对象
     static  defaultProps = {
            age:18,
            sex:'男'

        }
        render() {
            console.log(this)
            const {name, age, sex} = this.props
            return (
                <div>
                    <li>姓名:{name}</li>
                    <li>年龄:{age}</li>
                    <li>性别:{sex}</li>
                </div>
            )
        }
    }


    const per = {name: '小刘', age: 18, sex: '男'}
    console.log('res', ...per) // ...拓展运算符是不能用这种方式展开对象的
    ReactDOM.render(<Person name="老刘" age={18} sex="男" speak={speak}/>, document.getElementById('app'))
    // ...拓展运算符要以传递参数的方式才可以展开对象
    ReactDOM.render(<Person name="小芳" age={18} sex="女"/>, document.getElementById('per1'))

    ReactDOM.render(<Person {...per}/>, document.getElementById('per'))

    function speak(){
        console.log('说话了')
    }
</script>

</body>
</html>
